<template>
	<view class="wrap">
		<up-sticky>
			<view class="wrap-navigation"
				:style="{height:(systemBarInfo.statusBarHeight + systemBarInfo.height + 10) + 'px'}">
				<view class="wrap-navigation-content align-center"
					:style="{lineHeight:systemBarInfo.height+'px',paddingTop:systemBarInfo.top+'px'}">
					<view class="title">
						蝶予
					</view>
					<view class="filter-content align-center" @click="handleFilter">
						<view class="filter-content-image"></view>
						<text>筛选</text>
					</view>
				</view>
			</view>
			<view class="wrap-tips align-justify-center">
				<view class="wrap-tips-image"></view>
				<!-- <image style="width: 40rpx;height: 40rpx;" src="/static/images/tips.png"></image> -->
				<text>为保证信息真实，新用户注册需要管理员回电验证信息!</text>
			</view>
		</up-sticky>
		<view class="wrap-list">
			<view class="wrap-list-item" :key="index" v-for="(item,index) in dataObj" @click="goDetail(item.userId)">
				<view class="wrap-list-item-info">
					<view class="wrap-list-item-info-t align-center">
						<up-image :src="item.headPicture" width="120rpx" height="120rpx"
							:radius="6"></up-image>
						<view class="wrap-list-item-info-t-r">
							<view class="user-name">
								{{item.wxName}}
							</view>
							<view class="wrap-list-item-info-tips align-center">
								<view v-show="item.isRealMark" class="wrap-list-item-info-tips-item align-justify-center">
									<view class="wrap-list-item-info-tips-item-sure"></view>
									实名
								</view>
								<view v-show="item.isEducationalMark" class="wrap-list-item-info-tips-item align-justify-center bgF8A366">
									<view class="wrap-list-item-info-tips-item-sure"></view>
									学历
								</view>
								<view v-show="item.isHouseMark" class="wrap-list-item-info-tips-item align-justify-center bg60DCEA">
									<view class="wrap-list-item-info-tips-item-sure"></view>
									房子
								</view>
								<view v-show="item.isCarMark" class="wrap-list-item-info-tips-item align-justify-center bg7BADEF">
									<view class="wrap-list-item-info-tips-item-sure"></view>
									车子
								</view>
							</view>
						</view>
					</view>
					<view class="wrap-list-item-info-b wrap-list-item-info-tips align-center">
						<view v-show="item.addressCityName" class="wrap-list-item-info-tips-item">
							{{item.addressCityName}}
						</view>
						<view v-show="item.birthday" class="wrap-list-item-info-tips-item">
							{{item.birthday}}年
						</view>
						<view v-show="item.workName" class="wrap-list-item-info-tips-item">
							{{item.workName}}
						</view>
						<view v-show="item.height" class="wrap-list-item-info-tips-item">
							{{item.height}}CM
						</view>
					</view>
				</view>
				<view class="wrap-list-item-introduce align-justify-center">
					<text>{{item.selfIntroduction}}</text>
					<view class="xingxing"></view>
				</view>
				<view class="wrap-list-item-atlas align-justify-space-between" v-show="item.photos.length">
					<up-image v-for="i in item.photos" :key="i" :src="i" width="148rpx" height="148rpx" :radius="6"></up-image>
				</view>
				<view class="wrap-list-item-mark align-justify-center" v-show="item.isSee">
					已见面
				</view>
			</view>
		</view>
		<view class="wrap-butler"></view>
		<up-modal width="590rpx" :show="modalShow" confirmText="同意相处" cancelText="不同意" :showCancelButton="true"
			cancelColor="#006FFF" confirmColor="#006FFF" @confirm="confirm" @cancel="modalShow = false"
			class="wrap-modal">
			<view class="wrap-inquiredating-img">
				<up-image src="/static/images/interact.png" width="590rpx" height="882rpx" bgColor="transparent"
					:fade="false"></up-image>
			</view>
			<view class="slot-content wrap-inquiredating-wrap">
				<view class="wrap-inquiredating-wrap-list">
					<view class="wrap-inquiredating-wrap-list-info">
						<view class="wrap-inquiredating-wrap-list-info-content align-center">
							<view class="wrap-inquiredating-wrap-list-info-content-atv">
								<up-image src="/static/images/agreeBg.png" :fade="false" width="120rpx" height="120rpx"
									radius="12rpx"></up-image>
							</view>
							<view class="wrap-inquiredating-wrap-list-info-content-name">
								<view class="wrap-list-info-title">
									昵称
								</view>
								<view class="wrap-inquiredating-wrap-list-info-content-name-name">
									聂小倩
								</view>
							</view>
						</view>
					</view>
					<view class="wrap-inquiredating-wrap-list-appointment">
						<view class="wrap-inquiredating-wrap-list-appointment-title">
							询问涵
						</view>
						<view class="wrap-inquiredating-wrap-list-appointment-dec">
							经过线下见面相处后觉得挺轻松，状态挺好，想继续交往，不知道是否可以？
						</view>
					</view>
				</view>
				<view class="wrap-inquiredating-wrap-needAccompany">
					若对方同意交往，系统将默认为您调成隐身模式，在系统中其他用户不会在看到您的信息。如果有需要请在“我的-设置-已有交往对象”中关闭。
				</view>
			</view>
		</up-modal>
		<up-modal width="590rpx" :show="agreeModalShow" confirmText="确定" cancelColor="#006FFF" confirmColor="#006FFF"
			@confirm="agreeModalConfirm" @cancel="modalShow = false" class="wrap-agreemodal">
			<view class="slot-content wrap-agreemodal-slot">
				<view class="wrap-agreemodal-slot-title">
					同意交往
				</view>
				<view class="wrap-agreemodal-slot-wrap align-center">
					<view class="wrap-agreemodal-slot-wrap-atv">
						<up-image src="/static/images/agreeBg.png" :fade="false" width="120rpx" height="120rpx"
							radius="12rpx"></up-image>
					</view>
					<view class="wrap-agreemodal-slot-wrap-name">
						<view class="wrap-list-info-title">
							昵称
						</view>
						<view class="wrap-agreemodal-slot-wrap-name-name">
							聂小倩
						</view>
					</view>
				</view>
				<view class="wrap-agreemodal-slot-bottom align-center-flex-column">
					<view class="wrap-agreemodal-slot-bottom-title">
						恭喜您找到自己的爱情
					</view>
					<up-image src="/static/images/agreeBg.png" bgColor="transparent" :fade="false" width="128rpx" height="104rpx"></up-image>
				</view>
			</view>
		</up-modal>
		<up-modal width="590rpx" :show="noAgreeModalShow" confirmText="确定" cancelColor="#006FFF" confirmColor="#006FFF"
			@confirm="noAgreeModalConfirm" @cancel="modalShow = false" class="wrap-agreemodal wrap-noagreemodal">
			<view class="slot-content wrap-agreemodal-slot">
				<view class="wrap-agreemodal-slot-title color7547FF">
					未同意交往
				</view>
				<view class="wrap-agreemodal-slot-wrap align-center">
					<view class="wrap-agreemodal-slot-wrap-atv">
						<up-image src="/static/images/agreeBg.png" :fade="false" width="120rpx" height="120rpx"
							radius="12rpx"></up-image>
					</view>
					<view class="wrap-agreemodal-slot-wrap-name">
						<view class="wrap-list-info-title">
							昵称
						</view>
						<view class="wrap-agreemodal-slot-wrap-name-name">
							聂小倩
						</view>
					</view>
				</view>
				<view class="wrap-agreemodal-slot-bottom align-center-flex-column">
					<view class="wrap-agreemodal-slot-bottom-title active">
						不要气馁，调整好状态，然后出发，Ta会在下个转角等你哦~
					</view>
				</view>
			</view>
		</up-modal>
	</view>
</template>

<script setup>
	import { useConfigStore,useUserStore,useDictStore } from '@/store'
	import {totalPages,commonConstants} from '@/api/index'
	import { ref,onMounted,getCurrentInstance } from "vue"
	
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app'
	
	const query = ref({
		pageSize:20,
		pageNumber:1,
		...useDictStore().getFilterConfig().value
	})
	const dataObj = ref([])
	
	const isReachBottom = ref(false)
	
	// 下拉刷新
	onPullDownRefresh(async()=>{
		query.value.pageNumber = 1
		await getInfo()
		uni.stopPullDownRefresh()
	})
	
	// 上滑加载
	onReachBottom(async()=>{
		isReachBottom.value = true
		if(isReachBottom){
			query.value.pageNumber += 1
			await getInfo()
			isReachBottom.value = false
		}
	})
	
	onLoad(evt =>{
		getInfo()
		getCommonConstants()
	})
	
	const getCommonConstants = () => {
		commonConstants().then(res=>{
			if(res.income){
				res.income.forEach(item=>{
					const len = item.val.split('-')
					if(len.length === 2){
						item.incomes = [Number([len[0]+'000']),Number(len[1].replace('千','000'))]
					}else{
						item.incomes = [Number(len[0].replace('千以上','000'))]
					}
				})
			}
			useDictStore().setDict(res)
		})
	}
	
	const getInfo = () => {
		totalPages(query).then(res=>{
			const {records} = res
			dataObj.value = records
		})
	}
	
	const systemBarInfo = useConfigStore().systemBarInfo

	const modalShow = ref(false)

	const agreeModalShow = ref(false)
	
	const noAgreeModalShow = ref(false)

	// 跳转到筛选页面
	const handleFilter = () => {
		uni.navigateTo({
			url: '/pages/home/filter'
		})
	}

	const goDetail = (userId) => {
		uni.navigateTo({
			url: `/pages/home/detail?router=index&userId=${userId}`
		})
	}

	const confirm = () => {
		modalShow.value = false
	}
	
	const agreeModalConfirm = () => {
		agreeModalShow.value = false
	}
	
	const noAgreeModalConfirm = () => {
		noAgreeModalShow.value = false
	}
</script>

<style lang="scss" scoped>
	.wrap {
		width: 100%;

		&-agreemodal {
			::v-deep .u-modal__content {
				padding: 0 !important;
			}

			::v-deep .u-popup__content {
				background: linear-gradient(180deg, #FFE5F3 0%, #FFFFFF 100%);
			}

			&-slot {
				width: 100%;
				padding: 40rpx 40rpx 80rpx;
				box-sizing: border-box;

				&-title {
					font-weight: bold;
					font-size: 34rpx;
					color: #FF47AB;
					text-align: center;
					&.color7547FF{
						color: #7547FF;
					}
				}

				&-wrap {
					margin-top: 80rpx;
					padding-bottom: 40rpx;
					border-bottom: 2rpx solid #DEDEDE;
					box-sizing: border-box;
					&-name {
						margin-left: 16rpx;
					
						&-title {
							margin-bottom: 20rpx;
							font-size: 30rpx;
							color: #444444;
						}
					
						&-name {
							font-weight: bold;
							font-size: 34rpx;
							color: #222222;
						}
					}
				}
				
				&-bottom{
					padding-top: 60rpx;
					box-sizing: border-box;
					&-title{
						margin-bottom: 40rpx;
						font-weight: bold;
						font-size: 34rpx;
						color: #222222;
						&.active{
							margin-bottom: 0;
							font-weight: normal;
							font-size: 30rpx;
							color: #444444;
							line-height: 48rpx;
							text-align: center;
						}
					}
				}
			}
		}
		
		&-noagreemodal{
			::v-deep .u-popup__content {
				background: linear-gradient( 180deg, #E9E2FF 0%, #FFFFFF 100%);
			}
		}

		&-modal {
			::v-deep .u-popup__content {
				// overflow: auto;
			}

			::v-deep .u-modal__content {
				padding: 0 !important;
			}

			::v-deep .u-popup__content {
				background-color: transparent;
			}

			::v-deep .u-modal__button-group {
				background-color: #fff;
			}
		}

		&-inquiredating {
			position: relative;

			&-wrap {
				position: absolute;
				top: 210rpx;
				border-radius: 12rpx 12rpx 0 0;
				background-color: #fff;
				padding: 20rpx 40rpx 0 40rpx;
				box-sizing: border-box;

				&-list {
					box-sizing: border-box;
					background-color: #fff;
					border-radius: 12rpx 12rpx 12rpx 12rpx;

					&-info {
						height: 160rpx;
						border-bottom: 2rpx solid #DEDEDE;

						&-content {
							&-name {
								margin-left: 16rpx;

								&-title {
									margin-bottom: 20rpx;
									font-size: 30rpx;
									color: #444444;
								}

								&-name {
									font-weight: bold;
									font-size: 34rpx;
									color: #222222;
								}
							}
						}
					}

					&-appointment {
						padding: 40rpx 20rpx;
						box-sizing: border-box;
						border-bottom: 2rpx solid #DEDEDE;

						&-title {
							text-align: center;
							font-weight: bold;
							font-size: 34rpx;
							color: #222222;
						}

						&-dec {
							margin-top: 30rpx;
							font-size: 30rpx;
							color: #444444;
						}
					}
				}

				&-needAccompany {
					padding: 40rpx 20rpx;
					box-sizing: border-box;
					line-height: 36rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #FF47AB;
				}
			}
		}

		&-butler {
			z-index: 99;
			position: fixed;
			right: 0;
			bottom: 200rpx;
			width: 106rpx;
			height: 106rpx;
			background: url('/static/images/guanjia.png') center/cover no-repeat;
		}

		&-navigation {
			background-color: #ffffff;

			&-content {

				.title {
					margin-left: 30upx;
					letter-spacing: 2upx;
					font-weight: bold;
					font-size: 46upx;
					color: #222222;
				}

				.filter-content {
					margin-left: 48upx;
					font-size: 30upx;
					color: #222222;

					&-image {
						width: 30rpx;
						height: 30rpx;
						background: url("/static/images/filter.png") center/cover no-repeat;
					}

					text {
						margin-left: 8upx;
					}
				}
			}
		}

		&-tips {
			height: 76upx;
			background: linear-gradient(90deg, #EF9DFF 0%, #A78EFF 100%);
			font-weight: 400;
			font-size: 26upx;
			color: #FFFFFF;

			&-image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 16rpx;
				background: url('/static/images/tips.png') center/cover no-repeat;
			}

			::v-deep .u-image {
				margin-right: 16upx;
			}
		}

		&-list {
			margin-top: 30rpx;
			padding: 0 30rpx;
			box-sizing: border-box;

			&-item {
				position: relative;
				width: 100%;
				margin-bottom: 38rpx;
				padding: 40rpx;
				box-sizing: border-box;
				background-color: #ffffff;
				border-radius: 12rpx 12rpx 12rpx 12rpx;

				&-info {
					&-t {
						&-r {
							margin-left: 16rpx;

							.user-name {
								font-weight: 500;
								font-size: 34rpx;
								color: #222222;
							}
						}
					}

					&-tips {
						margin-top: 16rpx;

						&-item {
							width: 82rpx;
							height: 34rpx;
							margin-right: 16rpx;
							background-color: #57EE91;
							font-size: 22rpx;
							color: #ffffff;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							
							&.bgF8A366{
								background-color: #F8A366;
							}
							
							&.bg60DCEA{
								background-color: #60DCEA;
							}
							
							&.bg7BADEF{
								background-color: #7BADEF;
							}

							&-sure {
								width: 22rpx;
								height: 22rpx;
								margin-right: 4rpx;
								background: url('/static/images/sure.png') center/cover no-repeat;
							}
						}
					}

					&-b {
						.wrap-list-item-info-tips-item {
							width: auto;
							height: auto;
							padding: 10rpx 14rpx;
							box-sizing: border-box;
							color: #444444;
							font-size: 26rpx;
							background-color: #F3F3F3;
						}
					}
				}

				&-introduce {
					position: relative;
					margin-top: 40rpx;
					padding: 40rpx;
					box-sizing: border-box;
					background-color: #F8F6FF;

					.xingxing {
						position: absolute;
						left: 40rpx;
						top: -20rpx;
						width: 56rpx;
						height: 48rpx;
						background: url('/static/images/xingxing.png') center/cover no-repeat;
					}
				}

				&-atlas {
					margin-top: 40rpx;
				}

				&-mark {
					position: absolute;
					right: 0;
					top: 0;
					width: 106rpx;
					height: 46rpx;
					background: url('/static/images/jianmian-tips.png') center/cover no-repeat;
					font-size: 22rpx;
					color: #6E7AFF;
				}
			}
		}
	}
</style>